<ion-header>
    <ion-toolbar>
        <ion-buttons slot="start">
            <ion-back-button [text]="'core.back' | translate" />
        </ion-buttons>
        <ion-title>
            <h1>{{ 'addon.messages.messages' | translate }}</h1>
        </ion-title>
        <ion-buttons slot="end">
            <ion-button fill="clear" (click)="gotoSearch()" [ariaLabel]="'addon.messages.searchcombined' | translate">
                <ion-icon name="fas-magnifying-glass" slot="icon-only" aria-hidden="true" />
            </ion-button>
            <ion-button (click)="gotoSettings()" [ariaLabel]="'addon.messages.messagepreferences' | translate">
                <ion-icon name="fas-gear" slot="icon-only" aria-hidden="true" />
            </ion-button>
            <!-- Add an empty context menu so split view pages can add items, otherwise the menu disappears in some cases. -->
            <core-context-menu />
            <core-user-menu-button />
        </ion-buttons>
    </ion-toolbar>
</ion-header>
<ion-content>
    <core-split-view>
        <ion-refresher slot="fixed" [disabled]="!loaded" (ionRefresh)="refreshData($event.target)">
            <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}" />
        </ion-refresher>

        <core-loading [hideUntil]="loaded" [message]="loadingMessage">
            <ion-list>
                <ion-item class="ion-text-wrap" (click)="gotoContacts()" [detail]="true" button>
                    <ion-icon name="fas-address-book" slot="start" aria-hidden="true" />
                    <ion-label>
                        <p class="item-heading">{{ 'addon.messages.contacts' | translate }}</p>
                    </ion-label>
                    <ion-badge *ngIf="contactRequestsCount > 0" slot="end"
                        [attr.aria-label]="'addon.messages.pendingcontactrequests' | translate:{$a: contactRequestsCount}">
                        {{contactRequestsCount}}
                    </ion-badge>
                </ion-item>
                <ion-accordion-group (ionChange)="accordionGroupChange($event.detail)" #accordionGroup>
                    <ion-accordion *ngFor="let option of groupConversations" [value]="option.optionName" toggleIconSlot="start">
                        <ion-item slot="header" class="ion-text-wrap divider">
                            <ion-label>
                                <h2>{{ option.titleString | translate }} ({{ option.count }})</h2>
                            </ion-label>
                            <ion-badge slot="end" *ngIf="option.unread"
                                [attr.aria-label]="'addon.messages.unreadconversations' | translate:{$a: option.unread}">
                                {{ option.unread }}
                            </ion-badge>
                        </ion-item>
                        <div slot="content">
                            <ng-container *ngIf="!option.loading">
                                <ng-container *ngTemplateOutlet="conversationsTemplate;
                                        context: {conversations: option.conversations}" />
                                <!-- The infinite loading cannot be inside the ng-template,
                                    it fails because it doesn't find ion-content. -->
                                <core-infinite-loading [enabled]="option.canLoadMore" (action)="loadMoreConversations(option, $event)"
                                    [error]="option.loadMoreError" />
                                <ion-item class="ion-text-wrap" *ngIf="option.conversations && option.conversations.length === 0">
                                    <ion-label>
                                        <p>{{ option.emptyString| translate }}</p>
                                    </ion-label>
                                </ion-item>
                            </ng-container>
                            <ion-item class="ion-text-center" *ngIf="option.loading">
                                <ion-label>
                                    <ion-spinner [attr.aria-label]="'core.loading' | translate" />
                                </ion-label>
                            </ion-item>
                        </div>
                    </ion-accordion>
                </ion-accordion-group>
            </ion-list>
        </core-loading>
    </core-split-view>
</ion-content>

<!-- Template to render a list of conversations. -->
<ng-template #conversationsTemplate let-conversations="conversations">
    <ion-item class="ion-text-wrap addon-message-discussion" *ngFor="let conversation of conversations" button [detail]="false"
        [attr.aria-current]="((conversation.id && conversation.id === selectedConversationId) ||
            (conversation.userid && conversation.userid === selectedUserId)) ? 'page': 'false'"
        (click)="gotoConversation(conversation.id, conversation.userid)"
        id="addon-message-conversation-{{ conversation.id ? conversation.id : 'user-' + conversation.userid }}"
        [attr.aria-label]="conversation.name">
        <!-- Group conversation image. -->
        <ion-avatar slot="start" *ngIf="conversation.type === typeGroup">
            <img [url]="conversation.imageurl" [alt]="conversation.name" core-external-content
                onError="this.src='assets/img/group-avatar.svg'">
        </ion-avatar>

        <!-- Avatar for individual conversations. -->
        <core-user-avatar *ngIf="conversation.type !== typeGroup" core-user-avatar [user]="conversation.otherUser" [linkProfile]="false"
            [checkOnline]="conversation.showonlinestatus" slot="start" />

        <ion-label>
            <div class="flex-row ion-justify-content-between">
                <p class="item-heading">
                    <core-format-text [text]="conversation.name" contextLevel="system" [contextInstanceId]="0" />
                    <ion-icon name="fas-user-slash" *ngIf="conversation.isblocked"
                        [attr.aria-label]="'addon.messages.contactblocked' | translate" />
                    <ion-icon *ngIf="conversation.ismuted" name="fas-volume-xmark"
                        [title]="'addon.messages.mutedconversation' | translate" />
                </p>
                <ion-note *ngIf="conversation.lastmessagedate > 0 || conversation.unreadcount">
                    <span *ngIf="conversation.lastmessagedate > 0" class="addon-message-last-message-date">
                        {{conversation.lastmessagedate | coreDateDayOrTime}}
                    </span>
                    <ion-badge *ngIf="conversation.unreadcount > 0" aria-label="true">{{ conversation.unreadcount }}</ion-badge>
                    <span *ngIf="conversation.unreadcount > 0" class="sr-only">
                        {{ 'addon.messages.unreadmessages' | translate:{$a: conversation.unreadcount} }}
                    </span>
                </ion-note>
            </div>
            <p *ngIf="conversation.subname">
                <core-format-text [text]="conversation.subname" contextLevel="system" [contextInstanceId]="0" />
            </p>
            <p *ngIf="conversation.lastmessage !== undefined" class="addon-message-last-message">
                <span *ngIf="conversation.sentfromcurrentuser" class="addon-message-last-message-user">
                    {{ 'addon.messages.you' | translate }}
                </span>
                <span *ngIf="!conversation.sentfromcurrentuser && conversation.type === typeGroup && conversation.members[0]"
                    class="addon-message-last-message-user">{{ conversation.members[0].fullname + ':' }}</span>
                <core-format-text clean="true" singleLine="true" [text]="conversation.lastmessage" class="addon-message-last-message-text"
                    contextLevel="system" [contextInstanceId]="0" />
            </p>
        </ion-label>
    </ion-item>
</ng-template>
